<template>
  <div class="queryContainer">
    <div class="bcColor"></div>
    <div class="query panel">
      <div class="inner">
        <!-- 筛选 -->
        <div class="filter">
          <a href="javascript:;" class="active">景点名称:</a>
          <a href="javascript:;">{{ jingdian.name }}</a>
        </div>
        <div class="filter">
          <a href="javascript:;" class="active">等级:</a>
          <a href="javascript:;">{{ jingdian.leavel }}</a>
        </div>
        <div class="filter">
          <a href="javascript:;" class="active">详细地址:</a>
        </div>
        <!-- 数据 -->
        <div class="data">
          <h4>{{ jingdian.address }}</h4>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '@/utils/bus.js'

export default {
  name: 'Query',
  data() {
    return {
      jingdian: {
        name: '沫若戏剧文创园景区',
        leavel: '4A',
        address: '乐山市沙湾区乐沙城际生态大道生态河二桥沫若戏剧小镇'
      }
    }
  },
  mounted() {
    bus.$on('queryData', data => {
      // 使用接收到的数据
      this.jingdian = data
    })
  }
}
</script>

<style lang="less" scoped>
.queryContainer {
  display: flex;
  width: 280px;
  height: 130px;
  border: 10px solid pink;
  border-width: 51px 38px 20px 132px;
  border-image-source: url(../../assets/images/border.png);
  border-image-slice: 51 38 20 132;
  margin-bottom: 20px;
}

.bcColor {
  position: absolute;
  top: 7px;
  left: 12px;
  width: 423px;
  height: 170px;
  background-color: #00253170;
  box-shadow: 0 0 5px #0084ff, 0 0 10px #0084ff, 0 0 20px #0084ff;
}

.inner {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 20px;
  left: 30px;
  right: -38px;
  bottom: -0.25rem;
  padding: 0.3rem 0.45rem;
  /* background-color: red; */
}

.query {
  height: 150px;
}

.query .filter {
  display: flex;
  margin-bottom: 20px; /* 设置底部边距为20像素 */
}

.query .filter a {
  display: block;
  height: 18px;
  line-height: 1;
  padding: 0 18px;
  color: #00ffa8;
  font-size: 18px;
  border-right: 2px solid #00f2f1;
  text-decoration: none;
}

.query .filter a:first-child {
  padding-left: 0;
}

.query .filter a:last-child {
  border-right: none;
}

.query .filter a.active {
  color: red;
  font-size: 20px;
}

.query .data {
  display: flex;
  margin-top: 20px;
}

.query .item {
  width: 50%;
}

.query h4 {
  position: absolute;
  top: 85px;
  font-size: 18px;
  color: #00ffa8;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出长度的文字以省略号显示 */
  /* white-space: nowrap; */
  width: 400px; /* 根据需要设置合适的宽度 */
}

.query span {
  display: block;
  color: #00ffa8;
  font-size: 16px;
}
</style>
